import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { getUserList } from '@/api/mock'
import { useTranslation } from 'react-i18next'
import dayjs, { Dayjs } from 'dayjs'
import TextField from '@mui/material/TextField'
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
import { DatePicker } from '@mui/x-date-pickers/DatePicker'
import 'dayjs/locale/fr'
import 'dayjs/locale/ru'
import 'dayjs/locale/de'
import 'dayjs/locale/ar-sa'
import 'dayjs/locale/zh-cn'
import 'dayjs/locale/ja'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import { LocalesEnum } from '@/types/global.d'

const locales = {
  [LocalesEnum.zhCN]: 'zh-cn',
  [LocalesEnum.enUS]: 'en'
} as const

// type SupportedLocales = keyof typeof locales

export default function Home() {
  const locale = useSelector((state: RootState) => state.app.locale)
  const { t } = useTranslation()
  const location = useLocation()
  const navigate = useNavigate()
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'))

  const get = () => {
    console.log(location)
  }

  const login = () => {
    navigate('/login')
  }

  const test = () => {
    navigate('/test/1/娃哈哈')
  }

  const getData = async () => {
    setTimeout(() => {
      getUserList().then(({ data }) => {
        console.log('res:', data)
      })
    }, 1000)
    const { data } = await getUserList()
    console.log(data)
  }

  return (
    <>
      <h2 onClick={get}>{t('home.title')}</h2>
      <p>
        测试多语言：{t('common.actions.edit')}---
        {t('common.actions.del')}
      </p>
      <div onClick={test}>去测试页面</div>
      <div onClick={login}>去登录页面</div>
      <div onClick={getData}>获取数据</div>

      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={locales[locale as LocalesEnum]}>
        <DatePicker
          label="Basic example"
          value={value}
          onChange={(newValue) => {
            setValue(newValue)
          }}
          renderInput={(params) => <TextField {...params} />}
        />
      </LocalizationProvider>
    </>
  )
}
